import { Component, Input, OnInit } from '@angular/core';
import { NzModalSubject } from 'ng-zorro-antd';
import {HttpService} from "@core/services/http.service";

@Component({
    selector: 'modalComponent',
    template: `
        <div>
            <h4>{{_name}}</h4>
            <br/>
            <nz-table
                #proTable
                [nzAjaxData]="data"
                [nzLoading]="loading"
                [nzTotal]="total"
                [(nzPageIndex)]="Pi"
                (nzPageIndexChange)="refreshData()"
                [(nzPageSize)]="Ps"
            >
                <thead nz-thead>
                <tr>
                    <th nz-th>
                        <span>项目名称</span>
                    </th>
                    <th nz-th>
                        <span>项目类型</span>
                    </th>
                    <th nz-th>
                        <span>操作</span>
                    </th>
                </tr>
                </thead>
                <tbody nz-tbody>
                <tr nz-tbody-tr *ngFor="let item of proTable.data">
                    <td nz-td>
                        {{item.p_name}}
                    </td>
                    <td nz-td>
                        {{item.p_type | parseJson: 'label'}}
                    </td>
                    <td nz-td>
                        <a (click)="emitDataOutside(item)">授课</a>
                    </td>
                </tr>
                </tbody>
            </nz-table>
            <div class="customize-footer">
                <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="handleCancel($event)">
                    返 回
                </button>
            </div>
        </div>
    `,
    styles  : [
        `
      :host ::ng-deep .customize-footer {
        border-top: 1px solid #e9e9e9;
        padding: 10px 18px 0 10px;
        text-align: right;
        border-radius: 0 0 0px 0px;
        margin: 15px -16px -5px -16px;
      }
    `
    ]
})
export class ModalComponent implements OnInit {
    _id: number;
    _name;

    data = [];  // 演练数据
    loading = false;
    total = 0; // 总数据条数
    Pi = 1;  // 页码
    Ps = 10;  // 每页数量
    key = ''; // 检索关键字

    @Input()
    set id(value: number) {
        this._id = value;
    }


    ngOnInit() {
        this.getData(this._id, this.Pi, this.Ps);
    }

    refreshData() {
        this.getData(this._id, this.Pi, this.Ps);
    }

    getData(id, pi, ps) {
        this.http.getProjectListByClaId({cla_id: id, pi: pi, ps: ps}).subscribe(res => {
            if (res.list && res.list.length) {
                this.data = res['list'];
                this.total = res['total'];
            }
        });
    }

    emitDataOutside(item) {
        console.log(item);
        // item['p_type'] = JSON.parse(item['p_type']).value;
        this.subject.next({ data: item, start: true });
        this.subject.destroy();
    }

    handleCancel(e) {
        this.subject.destroy();
    }

    constructor(private subject: NzModalSubject, public http: HttpService) {

    }

}
